<template>
  <div class="m-menu">
    <dl
      class="nav"
      @mouseleave="mouseleave"
    >
      <dt>全部分类</dt>
      <dd
        v-for="(item,idx) of menu"
        :key="idx"
        @mouseenter="mouseenter"
      >
        <i :class="item.type"/>{{ item.title }}<span class="arrow"/>
      </dd>
    </dl>
    <div
      v-if="kind"
      class="detail"
      @mouseleave="sleave"
      @mouseenter="senter"
    >
      <template
        v-for="(item,idx) of curdetail.child">
        <h4 :key="idx">{{ item.title }}</h4>
        <span
          v-for="(childItem) of item.child"
          :key="childItem"
        >{{ childItem }}</span>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      kind: '',
      menu: [
        {
          type: 'food',
          title: '美食',
          child: [
            {
              title: '美食',
              child: ['qqq', 'weew', 'swswsws']
            }
          ]
        },
        {
          type: 'hotel',
          title: '酒店',
          child: [
            {
              title: '酒店',
              child: ['qqq1', 'weew2', 'swswsws3']
            }
          ]
        },
        {
          type: 'food',
          title: '美食'
        },
        {
          type: 'food',
          title: '美食'
        },
        {
          type: 'food',
          title: '美食'
        },
        {
          type: 'food',
          title: '美食'
        }
      ]
    }
  },
  computed: {
    curdetail() {
      return this.menu.filter(item => item.type === this.kind)[0]
    }
  },
  methods: {
    mouseleave() {
      let _this = this
      _this._timer = setTimeout(function() {
        _this.kind = ''
      }, 150)
    },
    mouseenter(e) {
      this.kind = e.target.querySelector('i').className
    },
    senter() {
      clearTimeout(this._timer)
    },
    sleave() {
      this.kind = ''
    }
  }
}
</script>
